<style lang="scss" scoped>
	.arr {
		color: #D9D9D9;
		margin-left: 10rpx;
	}

	// 确认订单头部
	.buyTicketMode {
		max-height: 100vh;

		.confirmtop {
			width: 100%;
			padding: 30rpx 0 30rpx 30rpx;
			background-image: linear-gradient(45deg, #f43f3b, #ec008c);
			color: #fff;
			display: flex;

			// 第一行
			.sendfont {
				display: flex;
				align-items: center;

				.icon-dianyingpiao1 {
					transform: rotate(135deg);
					margin-left: 20rpx;
					font-size: 28rpx;
				}

				.sedfont {
					font-size: 32rpx;
					box-sizing: border-box
				}

				.seatfont {
					font-size: 28rpx;
				}
			}

			// 第二行
			.sendfont2 {
				font-size: 28rpx;
				color: #fff;
				margin-top: 22rpx;

				text {
					margin-right: 8rpx;

					&:nth-of-type(4) {
						font-size: 18rpx;
						border: 1rpx solid #F78EB3;
						padding: 3rpx 8rpx;
						border-radius: 6rpx;
					}
				}
			}
		}

		.buyTicket {
			width: 100%;
			padding: 30rpx 30rpx 30rpx 30rpx;

			.buyTicket_title {
				font-size: 26rpx;
				color: #333333;
				font-weight: bold;
			}

			.buyTicket_con {
				box-shadow: 0px 0px 9px 0px rgba(179, 179, 179, 0.43);
				border-radius: 8px;
				margin-top: 30rpx;
				padding: 30rpx;
				background: #FFFFFF;

				.radioFa {
					position: relative;

					.radioCh {
						position: absolute;
						height: 100%;
						width: 100%;
						background: black;
						top: 0;
						left: 0;
						opacity: 0;
					}
				}

				.buyTicket_con_two {
					>view {
						border-radius: 4rpx;
						padding: 0 5rpx;
					}

					.one {
						border: 1px solid #97CD63;
					}

					.two {
						border: 1px solid #1796CF;
					}

					.three {
						border: 1px solid #999999;
					}
				}

				.buyTicket_con_three {
					margin-top: 10rpx;
				}
			}
		}

		.sub_btn {
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 118rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 8rpx 1rpx rgba(179, 179, 179, 0.24);

			.child_btn {
				width: 608rpx;
				height: 88rpx;
				background: linear-gradient(89deg, #EF4547 0%, #EF298A 100%);
				border-radius: 44rpx;
			}
		}
	}

	/deep/.u-mode-center-box {
		min-height: 0 !important;
		min-width: 0 !important;
	}

	.popup-model-box {
		background: #000000;
		// opacity: 0.76;
		border-radius: 4rpx;
		padding: 20rpx 45rpx;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.align-center {
		align-items: center;
	}

	.bai {
		color: #FFFFFF;
	}

	.hui {
		color: #666666;
	}

	.hui2 {
		color: #C4C4C4;
	}

	.hong {
		color: #EF3B5D;
	}

	.hei {
		color: #333333;
	}

	.lv {
		color: #97CD63;
	}

	.lan {
		color: #1796CF;
	}

	.f32 {
		font-size: 32rpx;
	}

	.f28 {
		font-size: 28rpx;
	}

	.f26 {
		font-size: 26rpx;
	}

	.f24 {
		font-size: 24rpx;
	}

	.f22 {
		font-size: 22rpx;
	}

	.ml10 {
		margin-left: 10rpx;
	}

	.ml15 {
		margin-left: 15rpx;
	}

	.ml20 {
		margin-left: 20rpx;
	}
</style>


<template>
	<!-- v-if="orderInfo.order.mn" -->
	<view class="buyTicketMode" @touchmove.stop="">
		<!-- 头部 start -->
		<title :center="false" title="确认订单" iconSize="38" bgcolor="#fff" color="#666"
			icon="/static/img/other/zuojiantou2.png" :bold="false" :iconSize="45" @to-click="toBack"></title>
		<view class="confirmtop" :style="{'margin-top': height * 1.5 + 100 + 'rpx'}">
			<view class="" style="flex:1;">
				<view class="sendfont">
					<text class="sedfont">{{option.movieName}}</text>
					<view class="iconfont icon-dianyingpiao1"></view>
					<text class="seatfont">{{option.count}}张</text>
				</view>
				<view class="sendfont2">
					<text>{{option.show_time || '' | getWeekByDay}}</text>
					<text>{{option.show_time || '' | formateDate('MM-DD')}}</text>
					<text>
						{{option.show_time || '' | formateDate('HH:mm')}}~{{option.show_time || '' | endTime(option.timeLength)}}
					</text>
					<text v-if="option.tp">{{option.tp}}</text>
				</view>
				<view class="sendfont2">{{option.cname}}|{{option.cinemaName}}</view>
				<view class="sendfont2">{{option.hallName}}({{option.seat | shufilter(',', ' ', true)}})
				</view>
			</view>
		</view>
		<!-- 头部 end -->

		<!-- 购票方式 start -->
		<view class="buyTicket">
			<view class="buyTicket_title">
				购票方式
			</view>
			<!-- 特惠购票  -->
			<view class="buyTicket_con" @click="clickRadio(0)">
				<view class="buyTicket_con_one flex align-center">
					<view class="">
						<text :class="[isBol ? 'hei':'hui2', 'f26'] ">特惠购票</text>
						<text :class="[isBol ? 'hong':'hui2', 'f24','ml20']">￥{{(option.price * option.count).toFixed(2)}}</text>
					</view>
					<view class="radioFa">
						<radio style="transform:scale(0.7)" @click="clickRadio(0)" color='#EF3B5D'
							:checked="select == 0" :disabled="isBol ? false : true" />
						<!-- <view class="radioCh" @click="tipInfo" v-if="!isBol">
						</view> -->
					</view>
				</view>
				<view class="buyTicket_con_two flex justify-start">
					<view :class="[isBol ? 'lv':'hui2', 'f22', 'one']"
						:style="{'borderColor':isBol ? '#97CD63':'#C4C4C4'}">
						限量抢票
					</view>
					<view :class="[isBol ? 'lan':'hui2', 'f22', 'two' ,'ml10']"
						:style="{'borderColor':isBol ? '#1796CF':'#C4C4C4'}">
						出票成功率95%
					</view>
					<!-- <view :class="[isOut() ? 'hui':'hui2', 'f22', 'three' ,'ml10']"
						:style="{'borderColor':isOut() ? '#999999':'#C4C4C4'}">
						排队中可退改签
					</view> -->
				</view>
				<view class="buyTicket_con_three">
					<view :class="[isBol ? 'hui':'hui2', 'f24']">
						优惠大但耗时，适合<text :class="[isBol ? 'hong':'hui2']">时间充裕</text>提前购票用户
					</view>
					<view :class="[isBol ? 'hui':'hui2', 'f24']">
						出票时间15-60分钟，出票失败全额退款
					</view>
					<view :class="[isBol ? 'hui':'hui2', 'f24']">
						出单中和已出票的订单<text :class="[isBol ? 'hong':'hui2']">不可改签、退款、未出票原路退回</text>
					</view>
				</view>
			</view>
			<!-- 极速出票 -->
			<view class="buyTicket_con" @click="clickRadio(1)">
				<view class="buyTicket_con_one flex align-center">
					<view class="">
						<text class="f26 hei">极速出票</text>
						<text class="f24 hong ml20">￥{{(option.settle_price * option.count).toFixed(2)}}</text>
					</view>
					<radio @click="clickRadio(1)" style="transform:scale(0.7)" color='#EF3B5D' :checked="select == 1" />
				</view>
				<view class="buyTicket_con_two flex justify-start">
					<view class="lv f22 one">
						限量抢票
					</view>
					<view class="lan f22 two ml10">
						出票成功率95%
					</view>
					<!-- <view class="hui f22 three ml10">
						排队中可退改签
					</view> -->
				</view>
				<view class="buyTicket_con_three">
					<view class="hui f24">
						适合着急、<text class="hong">临场用户</text>
					</view>
					<view class="hui f24">
						实时锁座、方便快捷、日常优惠
					</view>
					<view class="hui f24">
						出单中和已出票的订单<text class="hong">不可改签、退款、未出票原路退回</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 购票方式 end -->

		<view class="sub_btn flex justify-center align-center">
			<view class="child_btn flex justify-center align-center bai f32" @click="addOrder">
				我选好了
			</view>
		</view>

		<!-- 价格明细弹出 start -->
		<u-popup v-model="priceModal.show" :closeable='false' mode="center" :mask='false'>
			<view class="popup-model-box f26 bai">
				特惠购票需提前60分钟购票！
			</view>
		</u-popup>
		<!-- 价格明细弹出 end -->
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	export default {
		components: {
			title
		},
		data() {
			return {
				height: 0,
				option: {},
				select: 0,
				// 订单信息
				orderInfo: {
					order: {},
					userinfo: {}
				},
				// 价格明细弹出
				priceModal: {
					show: false,
				},
				isBol: true,
			}
		},
		watch: {
			orderInfo: {
				handler(newValue, oldValue) {
					this.$nextTick(function() {
						// console.log('this.option.show_time',this.option.show_time)
						this.select = this.isBol ? 0 : 1
					})
				},
				immediate: true
			}
		},

		onLoad(option) {
			this.option = JSON.parse(decodeURIComponent(option.order))
			// console.log('this.option', this.option)
			this.isOut()
			// this.option = option
			// this.getSubmitOrder()
		},

		onShow() {
			this.$nextTick(() => {
				this.height = this.$common.setWidthHeight()
			})
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		},


		methods: {
			tipInfo() {
				this.priceModal.show = true;
			},
			clickRadio(i) {
				if (i === 1) {
					this.select = i
				} else {
					if (!this.isBol) {
						this.tipInfo()
						return false
					} else {
						this.select = i
					}
				}
			},
			isOut() {
				// let t1 = this.$moment(this.orderInfo.order.show_time)
				let t1 = this.$moment(this.option.show_time)
				let t2 = this.$moment(new Date());
				//计算时间差并转换成标准时间单位
				let dura = t1.format('x') - t2.format('x');
				let tempTime = this.$moment.duration(dura);
				this.isBol = tempTime.asMinutes() > 60 ? true : false
			},
			// 返回
			toBack() {
				uni.navigateBack()
			},
			// async toBack() {
			// 	let isPay = await this.getIsPayByOid()
			// 	if (isPay) {
			// 		uni.showModal({
			// 			title: '温馨提醒',
			// 			content: '订单取消后,已选座位将不会保留',
			// 			cancelText: '确认取消',
			// 			cancelColor: '#424242',
			// 			confirmText: '继续支付',
			// 			confirmColor: '#F2304E',
			// 			success: (res) => {
			// 				if (res.cancel) {
			// 					this.releaseOrder(true)
			// 				} else {}
			// 			}
			// 		})
			// 	} else {
			// 		this.$common.toBack(1)
			// 	}
			// },
			addOrder() {
				uni.showLoading({
					title: '加载中'
				})
				let data = Object.assign({}, this.option)
				data['is_express'] = this.select
				if(this.select === 1){
					data['price'] = data['settle_price']
				}
				this.$api.addNewOrder({
					listInfo: data
				}).then(res => {
					uni.hideLoading()
					uni.navigateTo({
						url: `/subpages/seat/submit?oid=${res.data.data.id}`
					})
				})
			},

			// 获取提交所需的订单信息
			getSubmitOrder() {
				this.$api.getSubmitOrder(this.option).then(res => {
					this.orderInfo = res.data.data
					uni.hideLoading()
				})
			},


			// 设置取消订单
			async setCancel() {
				if (!await this.getIsPayByOid()) {
					this.$common.toBack(1)
				} else {
					let _this = this
					uni.showModal({
						title: "温馨提醒",
						content: "订单取消后,已选座位将不会保留",
						cancelColor: "#999",
						confirmColor: "#F1255D",
						cancelText: "确认取消",
						confirmText: "继续支付",
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
							} else if (res.cancel) {
								_this.releaseOrder(true)
							}
						},
					})
				}
			},
			// 获取订单是否支付
			async getIsPayByOid() {
				let res = await this.$api.getIsPayByOid({
					id: this.orderInfo.order.id
				})
				if (res.data.data.is_pay == 0) {
					return true
				} else {
					return false
				}
			},
			// 取消订单
			releaseOrder(status) {
				if (status) {
					uni.showLoading({
						title: "取消中"
					})
				}
				this.$api.releaseOrder({
					oid: this.option.oid
				}).then(res => {
					uni.hideLoading()
					this.$common.toBack(1)
				}).catch(err => {
					console.log(err)
					this.$common.toBack(1)
				})
			},
		},
	}
</script>
